<template>
	<view>
		
			<top-bar fixed="relative"></top-bar>
		
		<view v-if="orders && orders.length>0">
			<view class="order" v-for="(item,index) in orders" :key="index">
				<view class=" flex justify-between title">
					<view>
						<text class="time">{{item.createTime}}</text>
					</view>
					<view>
						<text class="state" v-if="item.state == '3003'">{{item.stateName}}</text>
						<text class="state-s" v-else>{{item.stateName}}</text>
					</view>
				</view>
				<view class="flex justify-start body">
					<view class="body-image">
						<image v-if="item.coverPhoto" :src="item.coverPhoto"></image>
						<image v-else src="/static/noPic.png"></image>
					</view>
					<view class="body-c flex flex-direction justify-between">
						<view><text class="c-title">【{{item.userCount}}人团】{{item.prodName}}</text></view>
						<view><text class="group-price">￥{{item.groupPrice}}</text><text
								class="normal-price">￥{{item.price}}</text></view>
					</view>
				</view>
				<view class=" flex justify-between floor">
					<view>
						<view><text>结束时间：</text><text style="color: #e1212b;">{{item.endTime}}</text></view>
						<view style="margin-top: 8rpx;"><text>拼团编号：{{item.orderId}}</text></view>
					</view>
					<view class="f-button">
						<button class="cu-btn round bg-orange sm margin-right-xs" v-if="item.state == '3003'"
							@click="_returnFee(item)">取消</button>
						<button class="cu-btn round bg-red sm " v-if="item.state == '3003'"
							@click="_toGroupGoods(item)">邀请参团</button>
						<button class="cu-btn round bg-orange sm " v-else @click="_toBuy(item)">再次拼团</button>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<no-data-page></no-data-page>
		</view>
	</view>
</template>

<script>
	import topBar from "@/components/top-bar/top-bar.vue";
	import {
		getMyProductGroupOrder
	} from '@/api/order/orderApi.js';
	import noDataPage from '@/components/no-data-page/no-data-page.vue';
	export default {
		data() {
			return {
				orders: []
			}
		},
		onLoad() {
			this._loadGroupProductOrder();
		},
		components: {
			noDataPage,
			topBar
		},
		methods: {
			_loadGroupProductOrder: function() {
				let _that = this;
				getMyProductGroupOrder({
					page: 1,
					row: 15
				}).then(_data => {
					_that.orders = _data;
				})
			},
			_toGroupGoods: function(_order) {
				uni.navigateTo({
					url: '/pages/myOrder/groupProductOrderDetail?orderId=' + _order.orderId
				})
			},
			_returnFee: function(_group) {
				uni.navigateTo({
					url: '/pages/myOrder/groupProductReturn?orderId=' + _group.orderId + "&shopId=" + _group
						.shopId
				})
			},
			_toBuy: function(_product) {
				let _url = "/pages/goods/groupGoods"
				_url += "?productId=" + _product.productId + "&groupId=" + _product.groupId + "&shopId=" + _product
					.shopId;

				uni.navigateTo({
					url: _url
				})
			}
		}
	}
</script>

<style lang="scss">
	.order {
		background-color: #fff;
		min-height: 300rpx;
		border-radius: 20rpx;
		margin: 0 25rpx 20rpx 25rpx;

		.title {
			padding: 15upx;
			border-bottom: 2upx solid #f1f1f1;

			.time {
				color: #777;
				font-size: 28upx;
				line-height: 50upx;
			}

			.state {
				color: #e1212b;
				font-size: 32upx;
			}

			.state-s {
				color: #777;
				font-size: 32upx;
			}
		}

		.body {
			padding: 15px;
			border-bottom: 2upx solid #f1f1f1;

			image {
				width: 150upx;
				height: 150upx;
				border-radius: 10upx;
			}

			.body-c {
				margin-left: 20upx;

				.c-title {
					color: #444;
					font-size: 28upx;
				}

				.group-price {
					color: #e1212b;
					font-size: 34upx;
				}

				.normal-price {
					margin-left: 30upx;
					color: #777;
					font-size: 24rpx;
					text-decoration: line-through;
				}

			}
		}

		.floor {
			padding: 15upx;

			text {
				font-size: 24rpx;
				color: #777;
			}

			.f-button {
				line-height: 70upx;
			}
		}
	}
</style>